<!--首页-->
<template>
    <scroller>
    <div class="m-pageSearch">
        <div class="layout-1">
            <div class="item-1">
                <i class="icon-kf_homepage_search search"></i>
                <input type="search" autocorrect="off" autocomplete="off"
                                                              :placeholder="placeholder"
                                                              @keyup.13="search"
                                                              v-focus="focusStatus"
                                                              v-model.trim="searchInput"
                                                              :class="{ 'active' : inputFocus }"
                                                                @focus="this.inputFocus = true"
                                                                @blur="this.inputFocus = false">
                <i class="icon-kf_search_delete delete" v-show="searchInput.length > 0 " @click="searchInput = ''"></i>
            </div>
            <div class="item-2" @click="back">取消</div>
        </div>
        <div class="layout-2">大家都在问</div>
        <div class="layout-3">
            <issuess></issuess>
            <div class="item-2">
                <i class="noContent"></i>
                <div>未搜到相关内容</div>
            </div>
        </div>
    </div>
    </scroller>
</template>

<script>
    import axios from "axios";
    import cgi from "@/common/cgi";
    import issuess from "@/components/issuess.vue";
    export default {
        name: 'search',
        components: {issuess},
        data() {
            return {
                searchInput:'',//搜索输入
                placeholder: this.$route.query.placeholder,
                focusStatus: false,
                inputFocus: true,
            };
        },
        methods: {
            back() {
                this.$router.go(-1);
            },
            search(){
                //开始搜索内容
                let _searchContent = '';
                if(this.searchInput) {
                    _searchContent = this.searchInput;
                } else  {
                    _searchContent = this.placeholder;
                }
            //ajax
            },
        },
        directives: {
            focus: {
                inserted: function (el, {value}) {
                    if (value) {
                        el.focus();
                    }
                }
            }
        },
        beforeMount() {
           this.focusStatus = true;
        }
    };
</script>

<style lang="scss" type="text/scss" scoped>
@import "./../scss/variables";
@import "./../scss/mixin";
.m-pageSearch {
    .layout-1 {
        padding: px2rem(50) px2rem(31) px2rem(10) px2rem(31);
        >div {
            display: inline-block;
            vertical-align: middle;
        }
        .item-1 {
            position: relative;
            border-radius: px2rem(200);
            overflow:hidden;
            height: px2rem(60);
            width: px2rem(584);
            background-color: $bg-colorC;
            padding: 0 px2rem(26);
            i {
                display: inline-block;
                font-size: px2rem(56);
            }
            .search {
                position: relative;
                top: px2rem(4);
                width: px2rem(80);
            }
            .delete {
                position: absolute;
                font-size: px2rem(40);
                top: px2rem(12);
                right: px2rem(6);
            }
        }
        input {
            position: relative;
            top: px2rem(-10);
            border:none;
            outline:medium;
            background-color: transparent;
            width: px2rem(380);
            height: 100%;
            font-size: px2rem(30);
            color: $f-colorB;
        }
        .active {
            color: $f-colorA;
        }
        .item-2 {
            font-size: px2rem(32);
            color: #4A505A;
            margin-left: px2rem(30);
        }
    }
    .layout-2 {
        font-size: px2rem(22);
        color: $f-colorB;
        margin: px2rem(36) px2rem(32) 0 px2rem(32);
        padding-bottom: px2rem(13);
        border-bottom: solid 1px $bl-colorB;
    }
    .layout-3 {
        padding-left: px2rem(32);
    }
    .item-2 {
        text-align: center;
        .noContent {
            display: inline-block;
            background-image: url(./../images/No_content.svg);
            background-size: 100% 100%;
            width: px2rem(360);
            height: px2rem(360);
        }
       div {
           font-size: px2rem(30);
           color: $f-colorB;
           margin-top: px2rem(54);
       }
    }
}
</style>

